<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>CRM客户关系管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<!-- <link rel="stylesheet" href="/gaoa/Public/css/global.css" media="all"> -->
	<!--<link rel="stylesheet" href="/gaoa/Public/plugins/font-awesome/css/font-awesome.min.css"> -->

	<link rel="stylesheet" href="/gaoa/Public/css/element-ui--index.css">


	<style>
	    *{
	    	font-family: microsoft YaHei;
	    }
		.pull-left {
			float: left;
		}
		.pull-right {
			float: right;
		}
		.container {
			padding: 2px;
		}
		.container > .wrapp >  .el-row {
			margin-bottom: 10px;
		}
		.el-form--inline .el-form-item {
			margin-bottom: 0px;
		}
/*		#app>.wrapp{
			display: none;
		}*/
		
		/*表格条纹样式*/
		.el-table .info-row {
		background: #ffffff;
		}

		.el-table .positive-row {
		background: #c9e5f5;
		}
		.cell img{
			vertical-align: middle;
		}
		
		.el-date-editor.el-input{
			width: 100%;
			max-width: 370px;
		}

		.el-table__body tr.current-row>td{
	      background: rgba(157, 195, 232, 0.7) !important;
	  }

    @media screen and (min-width:1165px) and (max-width:1200px){
      .el-dialog--small {
          width: 70%;
      }
    }

    @media only screen and (max-width:1164px){
      .el-dialog--small {
          width: 85%;
      }
    }  		
	</style>
	<!-- 如果没有 则 提供一些高级的js功能  -->
	<script src="/gaoa/Public/js/advancejs.js"></script>
	<!-- 不支持IE9 及以下的浏览器 -->
	<!--[if lte IE 9]> 
	<script>
		window.location.href="<?php echo U('login/notsupport');?>";
	</script>
	<![endif]-->
	
	

</head>
<body>
	
	
  <div id="app" class="container">
  	<div v-show="show" class="wrapp" style="display:none">
  		<!-- table -->
  		<el-row>
     <el-col :span="24">
      <el-table 
      :data="dataList" 
      v-loading="dataLoad" 
      element-loading-text="<?php echo L('DATA_LOGIN');?>"  
      :row-class-name="tableRowClassName">
        <el-table-column align="center" type="index" label="<?php echo L('INDEX');?>" width="100">
        </el-table-column>
        <el-table-column align="center" label="<?php echo L('FIELD_ClFIC');?>" prop="classfication">
        </el-table-column>
        <el-table-column align="center" label="<?php echo L('FIELD_NAME');?>" prop="title">
        </el-table-column>
        <el-table-column align="center" label="<?php echo L('FIELD_REMARK');?>" prop="remark">
        </el-table-column>
        <el-table-column inline-template align="center" label="<?php echo L('FIELD_STATUS');?>">
          <el-switch 
          	v-model="row.switch" 
          	on-color="#13ce66" 
          	off-color="#ff4949" 
          	@change="switchHandle($index, row)">
          </el-switch>
        </el-table-column>
        
        <el-table-column inline-template align="center" label="操作">
         <div>
         	<el-button
	          size="small"
	          @click="handleEdit($index, row)">
	          <?php echo L('EDIT');?>
	        </el-button>
         	<el-button
	          size="small"
	          type="danger"
	          @click="handleDelete($index, row)">
	          <?php echo L('DELETE');?>
	        </el-button>
         </div>
        </el-table-column>
      </el-table>
     </el-col>
  	 </el-row>
  	 <!-- table -->
  		<!-- toolbar -->
  		<el-row type="type" justify="space-around" align="middle" class="row-bg">
  		 <el-col :span="12">
       <div class="grid-content bg-purple">
       	 <span class="wrapper">
       	 	<el-tooltip content="<?php echo L('ADD_NEW');?>" placement="right">
	       	 	<el-button size="small"  @click="openDialog('add')" icon="plus" type="primary"><?php echo L('ADD');?></el-button>
	       	</el-tooltip>
       	 </span>
       </div>
  		 </el-col>
  		 <el-col :span="12">
  		  <!-- page -->
  		  <div class="grid-content bg-purple-light pull-right" style="display: none;">
  		  	  <el-pagination
  @current-change="handleCurrentPageChange"
  :current-page="currentPage"
  layout="total, prev, pager, next, jumper"
  :total="total"
  :page-size="pageSize"
  ref="pagination"
  >
</el-pagination>
  		  </div>
  		   <!-- page -->
  		 </el-col>
  	 </el-row>
  		<!-- toolbar -->
  	</div>
  	<div v-show="show" style="display:none">
  		<!-- 添加 -->
  		<el-dialog title="添加节点" v-model="addFormDialog">
 <el-form :model="addForm" :label-width="dialogLabelWidth">
    <el-form-item label="节点分类："  >
      <el-select @change="addFormSelect" v-model="addForm.pid" filterable  placeholder="请选择节点分类" style="width:270px;">
        <el-option v-for="item in levelOne" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="节点中文名：">
      <el-input  v-model="addForm.title" placeholder="请输入权限名称" style="width:270px;"></el-input>
    </el-form-item>
    <el-form-item label="节点名：">
      <el-input  v-model="addForm.name" placeholder="请输入节点名" style="width:270px;"></el-input>
    </el-form-item>
   <el-form-item label="节点说明：">
     <el-input v-model="addForm.remark" type="textarea" style="width:500px;" placeholder="请为节点添加说明"></el-input>
   </el-form-item>
    <el-form-item label="节点排序：">
    <el-input-number size="small" v-model="addForm.sort" :min="0" ></el-input-number>
     <span>由小到大</span>
   </el-form-item>
   <el-form-item label="状态：">
    <el-radio class="radio" v-model="addForm.status" label="0">禁用</el-radio>
    <el-radio class="radio" v-model="addForm.status" label="1">启用</el-radio>
   </el-form-item>
<!--   <el-form-item label="等级：" style="width:300px;">
  <el-input-number v-model="addForm.level"  :min="2" :max="3"></el-input-number>
  
  </el-form-item> -->
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog('add')">取 消</el-button>
     <el-button type="primary" v-show="!addFormSubmitStatus" @click="addFormSubmit(page.addFormUrl, 'add')" >确 定</el-button>
    <el-button type="primary" v-show="addFormSubmitStatus" :loading="true" >添加中</el-button>
  </span>
</el-dialog>
  		<!-- 修改 -->
  		<el-dialog title="编辑节点" v-model="editFormDialog">
 <el-form :model="editForm" :label-width="dialogLabelWidth">
    <el-form-item label="节点分类：" style="width:270px;">
     <el-select  v-model="editForm.pid" filterable  placeholder="请选择节点分类">
       <el-option v-for="item in levelOne" :label="item.name" :value="item.id" :disabled="item.disabled"></el-option>
     </el-select>
     <!-- <span>
       这里还要处理一下 编辑 顶级时应该不可选
       二级时 不能换成顶级
     </span> -->
    </el-form-item>
    <el-form-item label="节点中文名：">
     <el-input v-model="editForm.title" place="请输入权限名称" style="width:270px;"></el-input>
    </el-form-item>
    <el-form-item label="节点名：">
      <el-input  v-model="editForm.name" placeholder="请输入节点名" style="width:270px;"></el-input>
    </el-form-item>
   <el-form-item label="节点说明：">
     <el-input type="textarea" v-model="editForm.remark" style="width:500px;" placeholder="请为节点添加说明"></el-input>
   </el-form-item>

   <el-form-item label="节点排序：">
    <el-input-number v-model="editForm.sort" :min="0" size="small" ></el-input-number>
    <span>由小到大</span>
   </el-form-item>

    

   <el-form-item label="状态：">
      <el-radio class="radio" v-model="editForm.status" label="0">禁用</el-radio>
      <el-radio class="radio" v-model="editForm.status" label="1">启用</el-radio>
   </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog('edit')">取 消</el-button>
    <el-button type="primary" v-show="!editFormSubmitStatus" @click="editFormSubmit(page.editFormUrl, 'edit')" >确 定</el-button>
    <el-button type="primary" v-show="editFormSubmitStatus" :loading="true" >修改中</el-button>
  </span>
</el-dialog>
  		
  	</div>
  </div>

	<script src="/gaoa/Public/js/vue.min.js"></script>
  <script src="/gaoa/Public/js/element-ui--index.js"></script>
	<script src="/gaoa/Public/js/vue-resource.min.js"></script>

	<!-- vue 通用部分  -->
	<script src="/gaoa/Public/js/vueHooks.js"></script>
	<script src="/gaoa/Public/js/vueMethods.js"></script>
	<script src="/gaoa/Public/js/vueOption.js"></script>
	<script src="/gaoa/Public/js/vueCommonLogic.js?b=d"></script>
	<script>
		var page = {
			addFormUrl:"<?php echo U('add');?>",
			editFormUrl:"<?php echo U('edit');?>",
			listUrl:"<?php echo U('getList');?>",
			deleteUrl:"<?php echo U('delete');?>",
			pageSize:<?php echo ($pageSize); ?>
		}
		window.defaultOption = new VueOption();

		// setCommonLogin 还可以再细分
		setCommonLogic(window.defaultOption);


	</script>

	<!-- / vue 通用部分  -->


	<script>
		
		
	</script>


	
<script>
	window.defaultOption.setDatas({
		levelOne:[{id:"1", name:"顶级节点"}],
		searchForm:{}
	}).setForm('add', {
		pid:'',
		name:"",
		title:"",
		remark:"",
		status:'1',
		level:2,
		sort:0
	}).setForm('edit', {
		id:'',
		pid:'',
		name:"",
		title:"",
		remark:"",
		status:'1',
		sort:0
	}).setForm('status',{
			id:0,
			status:0
	}).setMethod('beforeList', function(dataList){
		var vmThis = this;
		vmThis.levelOne = [{id:"1", name:"顶级节点"}];
		dataList.forEach(function(currentValue, index){
			currentValue['switch'] = currentValue.status == 1 ? true: false;

			if (currentValue.level == 2) {
				currentValue['classfication'] = currentValue.title;
				vmThis.levelOne.push({id: currentValue.id, name:currentValue.title});
			} else {
				currentValue['classfication'] =  "";
			}
		});
		return dataList;
	}).setMethod('switchHandle', function(index, row){
		row.status = row.switch ? '1' : '0'; 
		this.initObject(this.statusForm, row);
		this.statusIndex = index;
		var  vmThis = this;
		
		//暂时这样了 这里强耦合
		this.$http.post(page.editFormUrl, this.statusForm).catch(function(response){
			vmThis.$message({
			  message: '状态更改失败',
			  type: 'error'
			});
			vmThis.dataList[vmThis.statusIndex].switch = ! vmThis.dataList[vmThis.statusIndex].switch ;

		});
	}).setMethod('addFormSelect', function(value){
		if (value==1) {
			this.addForm.level = 2;
		} else {
			this.addForm.level = 3;
		}
	}).setMethod('tableRowClassName', function(row, index){
		if (row.level==2) {
          return 'positive-row';
        } else {
          return '';
        }
	})
</script>

	<script>
	//改modal

		window.defaultVm = new Vue(window.defaultOption.getOption()).$mount('#app');
	</script>
</body>
</html>